特殊字符@@
底部被截展示不完全。但是同行的正常汉字没有缺失,高度也够。
设置了flex布局,调整为居中对齐。同时把line-height上下同时加了高度。
svg 修改颜色。 除了写好在svg 标签的属性中,还可以通过css属性(fill) 修改,包括背景色。
fill 属性不必须写在svg标签;父元素也可以。
移动端滚动dom抖动:比如定时器组件,视频播放器。
滚动到顶部的时候阻止滚动:e.stopProprogation
1 | // 这种写法是标准情况:作用在同一个父节点下的所有 |
p:last-child
可以实现一个很巧妙的效果:如果p不是最后一个字元素就不会命中。
z-index z-index属性在什么情况下会失效
通常 z-index 的使用是在有两个重叠的标签,在一定的情况下控制其中一个在另一个的上方或者下方出现。
z-index值越大就越是在上层。z-index元素的position属性需要是relative, absolute或是fixed。
z-index属性在下列情况下会失效:
fixed 并不总是相对于视窗进行定位的。会受到父元素的影响,而出现不能以窗口进行定位。
fixed不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。
fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时,容器由视口改为该祖先。
1) 给父元素加上 transform: scale(1,1) 或者是别的,只要transform 的属性不是none就行
2)虽然position:fixed是对于浏览器窗口定位的,但是只要不设置fixed元素的top,bottom,left,right,此时该元素就是相对于父元素进行定位的。如果要移动元素的位置,可以通过margin来实现。
如果父级元素设置了transform属性,position:relative/absolute/fixed会基于此定位.
relative 该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
子元素使用position:fixed,导致他的宽度不能和父元素保持一致的解决方案
他就默认相对于window去定位了,就相当与你将这个元素相对于window加上了position:absolute的属性,所以给他加百分比长度的话就是相对于window的百分比。
1、left:0;right:0;因为fixed也相当于是定位的一种,所以我们当然也可以用left和right来进行定位了,然后将left的值扩大,同时将width的百分比减少,从而使得son和demo的宽度达到一致,从而起到一种视觉上的欺骗效果。(PS:请谨慎使用)
2、calc();关于calc的具体使用将在我后面的播客中提出,在这里,我们可以将son的width由100%改为calc(100%-324px),这里这个长度不知道是否有规律,还是要自己找,相对来说适应性就不是很好。
3、absolute改造;
4、给fathor加fixed属性;
新的解决方案:
如果设置宽度width: inherit,会继承父元素宽度。
注意,父元素要显示设置width值,不能是100%
a { -webkit-tap-highlight-color:transparent; }
env(): https://developer.mozilla.org/zh-CN/docs/Web/CSS/env()
env()和constant(),是IOS11新增特性,Webkit的css函数,用于设定安全区域与边界的距离,有4个预定义变量:
css属性——env()和constant()设置安全区域
safe-area-inset-left:安全区域距离左边边界的距离
safe-area-inset-right:安全区域距离右边边界的距离
safe-area-inset-top:安全区域距离顶部边界的距离
safe-area-inset-bottom :安全距离底部边界的距离
而env()和constant()函数有个必要的使用前提,H5网页设置viewport-fit=cover的时候才生效,小程序里的viewport-fit默认是cover。1
2
3
4
5
6/* 适配底部代码: */
height: calc(96rpx+ constant(safe-area-inset-bottom));//兼容 IOS<11.2
height: calc(96rpx + env(safe-area-inset-bottom));//兼容 IOS>11.2
padding-bottom: constant(safe-area-inset-bottom);//兼容 IOS<11.2
padding-bottom: env(safe-area-inset-bottom);//兼容 IOS>11.2
引入ttf文件,浏览器解析失败。Failed to decode downloaded font:http://local.xxx.xxx.com:8080/static/fonts/%E6%96%B9%E6%AD%A3%E5%B0%91%E5%84%BF%E7%AE%80%E4%BD%93.cd7c372a.ttf
本地启的服务,也没有跨域。文件也加载了。
解决:fontmin 包括压缩。原因是引入的字体文件不全, 有兼容性
Fontmin: http://ecomfe.github.io/fontmin/#banner
第一个纯 JavaScript 字体子集化方案
下载软件 http://ecomfe.github.io/fontmin/#app
或者命令行npm i -g fontmin
1
2
3
4
5# -t, --text require glyphs by text
$ text=`curl www.baidu.com` && fontmin -t "$text" font.ttf
$ npm install -g html-to-text
$ text=`curl www.baidu.com | html-to-text` && fontmin -t "$text" font.ttf
场景: 元素分为左右两块,左边元素定宽,右边元素自动充满屏幕。
右边多设置一个width:0或overflow:hiddlen后样式正常。
为什么设置flex: 1可以实现宽度自适应?
这与flex属性的赋值语法有关,CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性,用来设置 flex-grow, flex-shrink 与 flex-basis。具体的语法规则可以参考MDN
三种属性比较好理解的分析参考:关于 Flex 中的 flex-grow、flex-shrink、flex-basis
flex: 1 = flex: 1 1 auto = flex-grow: 1
flex-grow属性用于瓜分父容器的剩余空间,在上面例子中,只有right设置了flex:1,所以它占了剩余空间的所有比例,实现了宽度的自适应。
对于为什么子元素宽度会溢出的问题,网上查了一下只说是弹性布局的特性以及父元素没有一个固定的长度进行限制这两个因素造成的,具体原因还不太清楚。。
<!–
设置flex属性时子元素宽度超出父元素
设置flex属性时子元素宽度超出父元素
$_PS: 内容一样 –>
ios 低版本 微信下方 返回栏
复现:从首页跳转到其他页面后,页面的底部会出现一个带有前进和后退按钮工具栏
原因:当页面跳转时,微信浏览器会通过window.history读取到浏览的历史记录,此时便会在页面底部显示出前进后退按钮的工具栏,造成页面底部内容遮挡。
最终:不解决。底部操作栏 并没有影响页面展示(没有遮住内容)。
(一)方案一:将页面的路由跳转方式更换为 “replace” 方式
全屏方案1
2
3
4
5
6
7
8<!-- webApp全屏显示,IOS设备 -->
<meta name='apple-mobile-web-app-capable' content='yes' />
<!-- 通用的浏览器 -->
<meta name='full-screen' content='true' />
<!-- QQ浏览器(X5内核)独有的META -->
<meta name='x5-fullscreen' content='true' />
<!-- 360浏览器独有的 -->
<meta name='360-fullscreen' content='true' />
align-self:center
,元素就会变为行内块,高度就不是100%,可以设置垂直居中 heigth:0%
消除影响transform适用于:所有块级元素及某些内联元素
transform失效了?iconfont字体图标无法旋转,无法缩放?的解决办法
【CSS】文字旋转90度
【CSS】文字旋转90度
1 | /* 方法一**/ |
网页强制横屏。或者js实现方式document.documentElement.requestFullscreen();screen.orientation.lock("portrait-primary");
[HTML5: Screen Orientation API]
[页面强制横屏]
P.S. 如果你的页面里有from表单要填的话,应该用 「弹出遮罩层让用户旋转手机」 的解决方案。检测手机竖屏下,提示用关闭屏幕旋转锁定,并横置手机。想想手机浏览器还是竖屏,而内容却被强制横屏的画面有多奇怪吧…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31 /*-- css单位:vmin/vmax, vh/vw --*/
@media screen and (orientation: portrait) {
html{
width : 100vmin;
height : 100vmax;
}
body{
width : 100vmin;
height : 100vmax;
}
#gyroContain{
width : 100vmax;
height : 100vmin;
transform-origin: top left;
transform: rotate(90deg) translate(0,-100vmin);
}
}
@media screen and (orientation: landscape) {
html{
width : 100vmax;
height : 100vmin;
}
body{
width : 100vmax;
height : 100vmin;
}
#gyroContain{
width : 100vmax;
height : 100vmin;
}
}
$PS: 当时是解决ppt在线浏览横屏,结果office文档在线浏览url跳转了,跳出当前页面了。反而使loading横屏了
<link rel="preload" as="font" type="font/ttf" crossorigin href="font/iconfont.ttf">
图片自适应–缩放,最大限度充满容器
1 | .wrapper{ |
重复嵌套的两个style,第一个定义样式不生效
1 | <style> |
style标签结合属性contenteditable*,可以在页面直接显示样式表,并且可编辑
tr,td 是table元素定义height无效,改写display,或者嵌套div ;
table设置layout:fixed 可以限定宽高
搜索结果展示,超出隐藏/… 。包括垂直方向
1 | .serch-description{/*\\*/ |
多行文字:
在webkit内核的浏览器中,多行文字省略可以采用CSS属性-webkit-line-clamp实现。
方案二:clamp.js
1 | .multiple-line { |
css 之 overflow: hidden
js 之 touchmove + preventDefault
解决方案 position: fixed
所以如果需要保持滚动条的位置需要用 js 保存滚动条位置关闭的时候还原滚动位置
元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
简而言之,我们想让哪层不滚动,只需要给这层设置 pointer-events: none 。
配合弹窗的状态,当弹窗显示的时候,给位于遮罩层底下的图层设置 pointer-events: none ,当弹窗隐藏/关闭的时候,设置 pointer-events: auto ,或者干脆移除这个属性。
阻止冒泡?事实上,这并没有什么卵用。
只加 overflow:hidden对移动端是无效的!
该方案会让浏览器的滚动条默认重置于初始位置
阻止body的默认滚动?
直接阻止 document的 touchmove事件: